<template>
  <div class="container">
    <div class="reactivity first">
      <span>
          <input type="text" v-model="user.id">
      </span>
      <span>
          <input type="text" v-model="user.name">
      </span>
       <span>
          <input type="text" v-model="user.gender">
      </span>
    </div>
    <div class="reactivity first">
      <span>id: {{ user.id }}</span>
      <span>name: {{ user.name }}</span>
      <span>gender: {{ user.gender }}</span>
    </div>
    
    <div class="reactivity second">
      <span>
          <input type="text" v-model="id">
      </span>
      <span>
          <input type="text" v-model="name">
      </span>
       <span>
          <input type="text" v-model="gender">
      </span>
    </div>
    <div class="reactivity second">
      <span>id: {{ id }}</span>
      <span>name: {{ name }}</span>
      <span>gender: {{ gender }}</span>
    </div>

    <p>问题: reactive 与 toRef 有什么关系？有什么区别？</p>
  </div>
</template>

<script setup>
// 从 vue 模块中导入 reactive 和 toRef 函数
import { reactive, toRef } from 'vue';

const user = reactive( { id: 1 , name: 'sanfeng', gender: '靓仔' } );

let student = reactive( { id: 101 , name: '翠山', gender: '靓仔' } );
// 用来为 源响应式对象 上的某个 property 新创建一个 Ref实例
const id = toRef( student , 'id' );
// Ref实例 可以被传递，它会保持对其 源property 的响应式连接
const name = toRef( student , 'name' );
const gender = toRef( student , 'gender' );
</script>

<style scoped>
.container {
    margin: 15px;
    border: 1px solid #dedede;
    box-shadow: 0 0 20px -10px blue;
}

.reactivity {
    display: flex;
    justify-content: space-between;
    margin: 15px;
    border: 1px solid blue;
    line-height: 50px;
}

.reactivity>span {
    flex-basis: 30%;
}
</style>